<template>
  <div class="container">
    <div class="div_block">
      <div class="form_block">
        <el-form :rules="rules" :model="form">
          <el-form-item style="margin-top: 50px" prop="username">
            <el-input placeholder="注册用户名" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="设置密码" v-model="form.password" type="password" show-password></el-input>
          </el-form-item>
          <el-form-item prop="repass">
            <el-input placeholder="确认密码" v-model="form.repass" type="password" show-password></el-input>
          </el-form-item>
          <el-form-item class="email_block" prop="email">
            <el-input placeholder="邮箱" v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item class="confirm_block">
            <el-button type="primary" plain round @click="regist">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "RegistBlock",
  data() {
    var checkNewPass = (rule, value, callback) => {
      if (value != this.form.password) {
        callback(new Error("两次输入密码不一致！"));
      }
      callback();
    };
    var checkUsername = (rule, value, callback) => {
      axios.get('http://localhost:8080/user/' + value)
        .then(data => {
          if (data.data.code == 1) {
            callback();
          } else {
            callback((new Error("用户名已经被注册")));
          }
        }).catch();

    };
    var emailValidate = (rule, value, callback) => {
      const pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (pattern.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的邮箱！"));
      }
    };
    return {
      form: {
        username: "",
        password: "",
        repass: '',
        email: ""
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur', },
          {
            min: 2,
            max: 10,
            message: '长度在 2 到 10 个字符',
            trigger: 'blur',
          },
          {
            validator: checkUsername,
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur', },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur',
          },

        ],
        repass: [
          { required: true, message: '请再次输入密码确认', trigger: 'blur', },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur',
          },
          {
            validator: checkNewPass,
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur', },
          {
            validator: emailValidate,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    regist() {
      axios.post('http://localhost:8080/user/register/' + this.form.username + "/" + this.form.password + "/"
        + this.form.email)
        .then(data => {
          if (data.data.code == 1) {
            alert("注册成功，请登录！");
            this.$router.push('/sign/login');
          } else {
            alert("注册失败！");
            this.$router.push('/sign/register');
          }
        }).catch();
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
}

.div_block {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.email_block .el-input {
  width: 200px;
  display: inline-block
}

.email_block .el-button {
  display: inline-block;
  margin-left: 7px;
}

.confirm_block .el-input {
  width: 100%;
}

.confirm_block .el-button {
  width: 100%;
  margin-bottom: 30px;
}
</style>
